<script setup>
import {CellGroup, Cell ,Divider, Field, Form, RadioGroup, Radio, Button, Switch} from "vant";
import {update} from '@/v-api/addNews'
import {Local} from "@/utils/storage";
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
const userInfo = Local.get('userInfo')

const router = useRouter();
const route = useRoute();
const AnnForm = reactive({
  id: route.params.id,
  schoolId: 1,
  authorId: userInfo.userId,
  privace: true,
  status: route.params.status,
  type: 24,
  title: route.params.title,
  content: route.params.content
})
console.log(route.params.id)
</script>

<template>
  <!--  <div class="bg">-->
  <!--    <Form @submit="edit(AnnForm)">-->
  <!--    <CellGroup inset style="margin: 20px;border: 1px solid black">-->
  <!--      <Field-->
  <!--          v-model="AnnForm.title"-->
  <!--          rows="1"-->
  <!--          autosize-->
  <!--          type="textarea"-->
  <!--          maxlength="30"-->
  <!--          placeholder="请输入标题"-->
  <!--          show-word-limit-->
  <!--          size="large"-->
  <!--      />-->
  <!--    </CellGroup>-->

  <!--    <CellGroup inset style="margin: 20px;border: 1px solid black">-->
  <!--      <Field-->
  <!--          v-model="AnnForm.content"-->
  <!--          rows="3"-->
  <!--          autosize-->
  <!--          type="textarea"-->
  <!--          maxlength="100"-->
  <!--          placeholder="请输入内容"-->
  <!--          show-word-limit-->
  <!--          size="large"-->
  <!--      />-->
  <!--    </CellGroup>-->

  <!--    <CellGroup inset style="margin: 20px;border: 1px solid black">-->
  <!--    <Field name="radio" label="单选框" >-->
  <!--      <template #input>-->
  <!--        <RadioGroup v-model="AnnForm.type" direction="horizontal">-->
  <!--          <Radio name="0">通知</Radio>-->
  <!--          <Radio name="1">公告</Radio>-->
  <!--          <Radio name="2">新闻</Radio>-->
  <!--        </RadioGroup>-->
  <!--      </template>-->
  <!--    </Field>-->
  <!--    </CellGroup>-->

  <!--      <CellGroup inset style="margin: 20px;border: 1px solid black">-->
  <!--        <Button block type="success" native-type="submit">-->
  <!--        保存-->
  <!--        </Button>-->
  <!--      </CellGroup>-->

  <!--    </Form>-->
  <!--  </div>-->
  <div class="bg">
    <Form @submit="update(AnnForm)">
      <CellGroup style="border: 1px solid black">
        <Field>
          <template #label>
            <div class="label-style">标题</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field
            v-model="AnnForm.title"
            rows="1"
            autosize
            type="textarea"
            maxlength="30"
            placeholder="请输入标题"
            show-word-limit
            size="large"
        />
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
        >
        </Divider>
        <Field>
          <template #label>
            <div class="label-style">内容</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field
            v-model="AnnForm.content"
            rows="3"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入内容"
            show-word-limit
            size="large"
        />
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
        >
        </Divider>
        <Field>
          <template #label>
            <div class="label-style">类型</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field name="radio">
          <template #label>
            <div class="label-style"></div>
          </template>
          <template #input>
            <RadioGroup v-model="AnnForm.type" direction="horizontal">
              <Radio name="0">通知</Radio>
              <Radio name="1">公告</Radio>
              <Radio name="2">新闻</Radio>
            </RadioGroup>
          </template>
        </Field>
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
        >
        </Divider>
        <Field name="switch" label="是否公开" right-icon="warning-o">
          <template #input>
            <Switch v-model="AnnForm.privace" size="20" />
          </template>
          <template #label>
            <div class="label-style">是否公开</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
      </CellGroup>

      <CellGroup style="margin-top: 20px;border: 1px solid black">
        <Button block type="success" native-type="submit">
          保存
        </Button>
      </CellGroup>

    </Form>
  </div>
</template>

<style scoped>
.label-style{
  font-size: 16px;
  font-weight: bold;
  color: black;
}

.bg{
  height: 640px; /* 设置高度为页面可视区域的100% */
  background-color: #d3e8d3; /* 设置背景颜色 */
  padding: 20px;
}
</style>